import { Button, Form, Input } from 'antd';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../store/methods/userSlice';
import { request } from '../../utils';
import useTitle from '../../hooks/useTitle';
import {User} from '../../types/index';
function Login(){
    const title = useTitle("欢迎登录")
    const navigate = useNavigate()
    const [result,setResult] = useState<any>()
    const {userLogin} = useAuth()
    const onFinish = async (values: any) => {
        const result:any = await request({url:'user/login',method:'post',body:values})
        let user=result.user
        userLogin({username:user.name,password:user.pwd});      
        localStorage.setItem("token","xxy")
        navigate("/")
      };
    
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };
    
    return (<div>
        <h1>登录页</h1>
        <div>
        <Form
      name="basic"
      labelCol={{ span: 10 }}
      wrapperCol={{ span: 4 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!'}
        ]}
      >
        <Input/>
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 10, span: 4 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
        </div>
        
    </div>)
}
export default Login;